<template>
    <div>
        <!-- 导航栏 -->
        <van-nav-bar title="实训云平台" left-text="返回" right-text="首页" left-arrow @click-left="onClickLeft"
            @click-right="onClickRight" :fixed="true" :placeholder="true" />
        <!-- 功能栏 -->
        <div style="display:flex;"  >
            <van-dropdown-menu active-color="#1989fa" style="width: 66%;" >
                <van-dropdown-item v-model="value1" :options="option1" @change="changeClass" style="width: 50%;" />
                <van-dropdown-item title="任务操作" ref="item" v-if="show ==3" style="width: 50%;" >
                    <van-cell title="修改任务" is-link @click="intoEditTask" />
                    <van-cell title="删除任务" is-link @click="delTask" />
                </van-dropdown-item>
            </van-dropdown-menu>
            <van-cell title="添加任务" is-link @click="showAddTask" style="width: 33%; text-align: center;" />
        </div>

        <!-- 列表展示-->
        <div v-show="show == 0">
            <div role="button" tabindex="0" index="0" v-for="(item, index) in list" :item="item" :key="index"
                @click="getStudentTask(item)"
                class="van-cell van-cell--clickable van-cell--center van-cell--borderless van-contact-card van-contact-card--edit">
                <i class="van-icon van-icon-contact van-cell__left-icon" />
                <div class="van-cell__value van-cell__value--alone van-contact-card__value">
                    <div>任务名称：{{ item.name }}</div>
                    <div>截止时间：{{ item.endTime }}</div>
                </div>
                <i class="van-icon van-icon-arrow van-cell__right-icon" />
            </div>

        </div>

        <!-- 添加任务信息 -->
        <div v-show="show == 1">
            <van-form @submit="addTask">
                <van-field v-model="name" name="name" label="任务名称" placeholder="任务名称"
                    :rules="[{ required: true, message: '请填写任务名称' }]" />

                <van-field readonly clickable name="endTime" :value="endTime" label="结束时间" placeholder="点击选择日期"
                    @click="showCalendar = true" />
                <van-calendar v-model="showCalendar" @confirm="onConfirm" />

                <van-field v-model="content" rows="3" name="content" autosize label="任务内容" type="textarea"
                    maxlength="50" placeholder="请输入任务内容" show-word-limit />


                <div style="margin: 16px;">
                    <van-button round block type="info" native-type="submit">提交</van-button>
                </div>
            </van-form>
        </div>

        <!-- 修改任务信息 -->
        <div v-show="show == 2">
            <van-form @submit="editTask">
                <van-field v-model="name" name="name" label="任务名称" placeholder="任务名称"
                    :rules="[{ required: true, message: '请填写任务名称' }]" />

                <van-field readonly clickable name="endTime" :value="endTime" label="结束时间" placeholder="点击选择日期"
                    @click="showCalendar = true" />
                <van-calendar v-model="showCalendar" @confirm="onConfirm" />

                <van-field v-model="content" rows="3" name="content" autosize label="任务内容" type="textarea"
                    maxlength="50" placeholder="请输入任务内容" show-word-limit />


                <div style="margin: 16px;">
                    <van-button round block type="info" native-type="submit">提交</van-button>
                </div>
            </van-form>

        </div>


        <!-- 评分-->
        <div v-show="show == 3">
            <div role="button" tabindex="0" index="0" v-for="(item, index) in students" :item="item" :key="index"
                @click="goscore(item)"
                class="van-cell van-cell--clickable van-cell--center van-cell--borderless van-contact-card van-contact-card--edit">
                <i class="van-icon van-icon-contact van-cell__left-icon" />
                <div class="van-cell__value van-cell__value--alone van-contact-card__value">
                    <div>学生姓名:{{ item.user.userNick }}</div>
                    <div>任务分数:{{ item.score }}</div>
                </div>
                <i class="van-icon van-icon-arrow van-cell__right-icon" />
            </div>
            <!-- <div style="">
                <div style="margin: 16px;">
                    <van-button round block type="info" native-type="submit" @click="intoEditTask">修改任务</van-button>
                </div>
                <div style="margin: 16px;">
                    <van-button round block type="danger" native-type="submit" @click="delTask">删除任务</van-button>
                </div>
            </div> -->
        </div>

        <van-dialog v-model="scoreDialog" title="评分" show-cancel-button :before-close="beforeClose"
            confirmButtonColor="#1989fa">
            <van-field v-model="tempScore" name="tempScore" label="分数" placeholder="分数"
                :rules="[{ required: true, message: '请填写分数' }]" />
        </van-dialog>


        <!-- 加载动画 -->
        <loading v-if="loadingStatus"></loading>
    </div>
</template>
<script>
import { Toast } from 'vant';
import req from '../../../request/request'
export default {
    name: 'TaskInfo',
    data() {
        return {

            show: 0,
            value1: 0,
            className: "",
            list: [],
            option1: [],
            // 加载动画
            loadingStatus: true,

            students: '',
            name: '',
            endTime: '',
            content: '',
            showCalendar: false,
            scoreDialog: false,
            tempScore: '',
            tempId: '',
            tempItem: '',
        };
    },
    methods: {
        // 加载切换
        goload(){
            this.loadingStatus = true;
            setTimeout(async () => {
            this.loadingStatus = false;
        }, 300);
        },
        //删除任务方法
        delTask() {
            this.goload();
            req({
                url: "delTask",
                method: "POST",
                data: {
                    taskId: this.tempItem.id
                }
            }).then(res => {
                Toast("删除成功！")
                // console.log(res);
                this.back();
            }).catch(err => {
                // console.log(err)
            })
        },

        //修改任务方法
        editTask(values) {
            this.goload();
            values.id = this.tempItem.id;
            values.content = this.content;
            req({
                url: "editTask",
                method: "POST",
                data: values
            }).then(res => {
                Toast("修改完成！")
                // console.log(res);
                this.back();
            }).catch(err => {
                // console.log(err)
            })
        },
        // 跳转修改任务
        intoEditTask() {
            this.show = 2;
            this.goload();
            this.name = this.tempItem.name
            this.endTime = this.tempItem.endTime
            this.content = this.tempItem.content
        },

        goscore(item) {
            this.tempScore = '',
            this.tempId = item.id,
            this.tempScore = item.score,
            this.scoreDialog = true
        },
        beforeClose(res, next, item) {
            if (res == "confirm") {
                // console.log(this.tempScore)
                // console.log(this.tempId)
                req({
                    url: "changeScore",
                    method: "POST",
                    data: {
                        id: this.tempId,
                        score: this.tempScore
                    },
                }).then(res => {
                    Toast("打分完成！")
                    // console.log(res);
                    this.getTaskStudents();
                }).catch(err => {
                    // console.log(err)
                })
                this.scoreDialog = false;
            } else {
                this.scoreDialog = false;
            }
            next();
        },


        // 展示日历
        onConfirm(date) {
            this.endTime = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
            this.showCalendar = false;
        },
        getTaskStudents() {
            setTimeout(async () => {
                this.loadingStatus = false;
            }, 1000);
            req({
                url: "getStudentTask",
                method: "POST",
                data: {
                    id: this.tempItem.id
                }

            }).then(res => {
                // console.log(res);
                this.students = res.data.data;
            }).catch(err => {
                // console.log(err)
            })
        },

        // 跳转修改页面
        getStudentTask(item) {
            
            this.show = 3;
            this.goload();
            this.tempItem = item;
            this.loadingStatus = true
            this.getTaskStudents();
        },



        // 添加任务
        addTask(values) {
            values.relationClassId = this.value1;
            values.relationTeacherId = this.$store.state.user.id;
            this.name = ''
            this.endTime = ''
            this.content = ''
            // console.log('submit', values);
            req({
                url: "addTask",
                method: "POST",
                data: values

            }).then(res => {
                this.back();
                Toast("成功添加！");
                // console.log(res);
                

          
                
            }).catch(err => {
                // console.log(err)
            })

        },



        // 显示添加表单
        showAddTask() {
            // 关闭菜单
            // this.$refs.item.toggle();
            // 更改显示表单
            this.show = 1;
            this.goload();

        },

        // 更改班级列表
        changeClass(res) {
            this.getTaskByClassId();
            for (var i = 0; i < this.option1.length; i++) {
                if (this.option1[i].value == res) {
                    this.className = this.option1[i].text;
                }
            }

        },
        // 获取班级列表
        getClassInfo() {

            req({
                url: "getClassInfo",
                method: "POST",
                data: {
                    id: this.$store.state.user.id
                }
            }).then(res => {
                if (res.data.code == 0) {
                    var data = res.data.data;
                    this.value1 = res.data.data[0].id;
                    this.className = res.data.data[0].name;
                    for (var i = 0; i < data.length; i++) {
                        var x = { text: '班级1', value: 0 };
                        x.text = data[i].name;
                        x.value = data[i].id;
                        this.option1.push(x);
                    }
                    //发请求 获取当前班级下所有的学生信息
                    this.getTaskByClassId()
                }
            }).catch(err => {
                // console.log(err);
            })
        },

        getTaskByClassId() {
            req({
                url: "getTaskByClassId",
                method: "POST",
                data: {
                    id: this.value1,
                    tid: this.$store.state.user.id,
                }
            }).then(res => {
                // console.log(res);
                this.list = res.data.data;
            }).catch(err => {
                // console.log(err);
            })
        },
        onClickLeft() {
            if (this.show == 0) {
                this.$router.back(1)
                // console.log("返回首页")
            } else {
                // 返回上一级
                this.back();
            }
        },

        onClickRight() {
            // 回到首页
            this.$router.back(1)
            
        },
        // 返回方法
        back() {
            this.show = 0;
            this.getTaskByClassId()
            this.loadingStatus = true;
            setTimeout(async () => {
            this.loadingStatus = false;
        }, 500);
        },

    },

    computed: {
    },
    mounted() {
        this.getClassInfo();

        setTimeout(async () => {
            this.loadingStatus = false;
        }, 1000);

    },
}
</script>
<style>
.addBatchStudent_box {
    margin-top: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
</style>